
<!--修改密码,忘记密码,确认功能-->
<template>
  <view>
<!--    获取短信-->
    <template v-if="pageType == 'forget'">
      <div class="title-h1">忘记密码</div>
      <div class="title-h3">请先验证您的手机号</div>
      <view class="input-box">
        <span>+86</span> <input type="text" :value="phone" @input="phoneChange"  class="input-phone" placeholder="请输入手机号"/>
      </view>
      <view class="input-box">
        <input type="text" :value="code" @input="ChangeCode"  class="input-phone" placeholder="请输入验证码"/>

        <u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
                @change="codeChange"></u-code>
        <span  @click="getCode" class="input-btn">{{ tips }} </span>
      </view>
      <u-button  @click="next"  text="下一步" :customStyle="customSty"></u-button>
    </template>

<!--    重置密码-->
    <template v-else-if="pageType == 'confirm'">
      <div class="title-h1">设置密码</div>
      <div class="title-h3">8-16位的英文字母+数字或字符的组合</div>
      <view class="input-box">
         <input type="text" :value="pwd" @blur ="pwdBlur"
                @input="pwdChange" class="input-phone" placeholder="请输入密码"/>
      </view>
      <view class="input-box">
        <input type="text" :value="pwdAgain" @blur ="pwdAgainBlur" @input="pwdAgainChange"  class="input-phone" placeholder="请再次输入密码"/>
      </view>
      <u-button  text="下一步" @click="confirm" :customStyle="customSty"></u-button>
    </template>
    <template v-else-if="pageType == 'finish'">
      <div class="flex-column">
        <image class="success-img" :src="src"></image>
        <div class="success-text">修改成功</div>
      </div>
      <u-button  text="返回登录页"  @click="backHome" class="mt" :customStyle="customSty"></u-button>
    </template>
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
import Enum from  '../../utils/enums';
export default {
  data() {
    return {

      /*
      * forget  忘记
      * confirm 确认
      * finish 完成
      **/
      pageType: "forget",
      customStyles: {
        marginTop:'100rpx'
      },
      phone:'',
      code:'',
      tips: '',
      // refCode: null,
      seconds: 10,
      src:require('../../static/logo.png'),
      pwd:'',
      pwdAgain:'',
    };
  },
  computed:{
    customSty(){
      // let obj = {}
      return Object.assign({},  Enum.customStyles,this.customStyles)
    }
  },
  methods: {
    phoneChange(e) {
      this.phone = e.target.value;
    },
    //输入验证码
    codeChange(text) {
      this.tips = text;
    },
    //获取验证码
    ChangeCode(e){
      this.code = e.target.value;
    },
    getCode() {
      if(!(/^1[3456789]\d{9}$/.test(this.phone))) {
        uni.$u.toast('请输入正确的手机号');
        return;
      }
      if(this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: '正在获取验证码'
        })
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast('验证码已发送');
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast('倒计时结束后再发送');
      }
    },
    end() {
      uni.$u.toast('倒计时结束');
    },
    start() {
      uni.$u.toast('倒计时开始');
    },
    pwdChange(e) {
      this.pwd = e.target.value
      //生成8-16位的秘密校验

    },
    pwdBlur(){
      if(!/^(?=.*[0-9])(?=.*[a-zA-Z]).{8,16}$/.test(this.pwd)){
        uni.$u.toast('请输入8-16位数字和密码');
        // return;
      }
    },


    pwdAgainChange(e) {
      this.pwdAgain = e.target.value

    },
    pwdAgainBlur(){
      if(this.pwd == this.pwdAgain){
        uni.$u.toast('密码输入不正确，请检查');
      }
    },
    next(){

      this.pageType = "confirm";
    },
    confirm(){
      this.pageType = "finish";
    },
    backHome(){
      uni.navigateTo({
        url: "/pages/login/login"
      });
    }
  }
}
</script>

<style lang="scss">
  @import '../../assets/css/base.scss';
  .success-img{
    width: 200rpx;
    height: 200rpx;
    opacity: 1;
  }
  .flex-column{
    margin-top: 200rpx;
  }
  .success-text{
      width: 160rpx;
      height: 48rpx;
      opacity: 1;
      color: #333333;
      text-align: left;
      font-size: 40rpx;
      font-weight: 0;
      line-height: 48px;
      margin-top: 118rpx;
  }
  .mt{
    margin-top: 100rpx;
  }
</style>
